<style lang="scss">
  /*.ui-page {*/
  /*  padding-bottom: 20px;*/

  /*  .ui-detail-box {*/
  /*    .ui-detail-btus {*/
  /*      // text-align: right;*/
  /*    }*/
  /*  }*/

  /*}*/
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>{{this.$route.query.title}}详情</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-form class="ui-search-form" label-width="120px">
          <el-form-item label="权限id">
            <el-input size="mini" disabled class="ui-item-reset" v-model="roleItem.roleId"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input size="mini" class="ui-item-reset" v-model="roleItem.name" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input size="mini" class="ui-item-reset" v-model="roleItem.description" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择" size="mini" class="ui-item-reset" v-model="roleItem.status"
                       disabled>
              <el-option label="禁用" :value="2"></el-option>
              <el-option label="启用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input size="mini" disabled class="ui-item-reset" v-model="roleItem.createTime"></el-input>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input size="mini" disabled class="ui-item-reset" v-model="roleItem.updateTime"></el-input>
          </el-form-item>
        </el-form>
        <div class="ui-detail-btus">
          <el-button size="mini" @click="editFlag=false" v-if="editFlag">编辑</el-button>
          <el-button size="mini" @click="cancelEdit" v-else>取消</el-button>
          <el-button type="primary" size="mini" @click="saveItem" :disabled="editFlag">保存</el-button>
        </div>
      </div>
    </div>
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>角色关联权限</div>
        <div>
          <el-button type="primary" size="mini" @click="addPermFlag=true">新增</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
<!--        <el-table v-loading="tabLoading" :data="permsList" :cell-style="cellStyle" :header-cell-style="rowClass">-->
<!--          <el-table-column type="selection" width="55"></el-table-column>-->
<!--          <el-table-column prop="permissionId" label="权限id"></el-table-column>-->
<!--          <el-table-column prop="name" label="名称"></el-table-column>-->
<!--          <el-table-column prop="url" label="路径"></el-table-column>-->
<!--          <el-table-column prop="status" label="状态">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>-->
<!--              <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="description" label="描述"></el-table-column>-->
<!--          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>-->
<!--          <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>-->
<!--          <el-table-column label="操作">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button size="mini" @click="checkPerm(scope.row)">详情</el-button>-->
<!--              <el-button size="mini" type="danger" @click="deletePerm(scope.row)">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
        <el-table v-loading="tabLoading" :data="dataList"
                  :cell-style="cellStyle" :header-cell-style="rowClass">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.children" v-if="props.row.children.length>0" :cell-style="cellStyle" :header-cell-style="rowClass">
                <!--              <el-table-column type="selection" width="55"></el-table-column>-->
                <el-table-column prop="permissionId" label="权限id"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="url" label="路径"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="perms" label="权限标识"></el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
                    <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="checkPerm(scope.row)">详情</el-button>
                    <el-button size="mini" type="danger" @click="deletePerm(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div v-else  style="color:#AE3939;">
                此{{props.row.routerName}}暂无子级
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="permissionId" label="权限id"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="url" label="路径"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="perms" label="权限标识"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
              <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="checkPerm(scope.row)">详情</el-button>
              <el-button size="mini" type="danger" @click="deletePerm(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="请选择要添加的权限" :visible.sync="addPermFlag" width="30%">
      <!-- <el-select v-model="permItem" placeholder="请选择" size="mini" multiple >
          <el-option :label="item.name" :value="item.permissionId" v-for="item in permsListAll" :key="item.permissionId" :disabled="item.select=='1'"></el-option>
      </el-select> -->
      <el-cascader v-model="permItem" :options="permsListAll" @change="handleChange" :props="propsOption"
                   size="mini"></el-cascader>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addPermFlag = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addPerm" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <loading v-if="showLoading"></loading>
  </div>
</template>
<script>
  import loading from '@/components/loading.vue'

  export default {
    name: 'permissionsDetail',
    components: {
      loading
    },
    data() {
      return {
        roleItem: {},
        editFlag: true,
        roleId: this.$route.query.id,
        permsList: [],
        addPermFlag: false,
        hasPerms: [],
        permsListAll: [],
        permItem: [],
        tabLoading: false,
        showLoading: false,
        propsOption: {
          multiple: true,
          label: "name",
          value: "permissionId",
          checkStrictly: true,
          // expandTrigger: "hover",
          disabled: "select",
          emitPath: false,
        },
        dataList:[]
      }
    },
    created() {
      this.getItem()
      this.getPerms()
    },
    mounted() {
      // this.getPermsAll()
    },
    methods: {
      handleChange(value) {
        // console.log('value', value)
        // console.log('permItem', this.permItem)
      },
      back() {
        this.$router.back(-1);
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
        this.getItem()
      },
      saveItem() {
        let params = this.roleItem
        delete params.createTime
        delete params.updateTime
        post(`/pms_api/role/edit`, params).then(res => {
          this.cancelEdit()
        }).catch(err => {
          console.log(err)
        })
      },
      getItem() {
        this.showLoading = true;
        post(`/pms_api/role/list?roleId=${this.roleId}`).then(res => {
          this.roleItem = res.data[0]
          this.showLoading = false;
        }).catch(err => {
          console.log(err)
        })
      },
      // 以下为权限模块
      getPerms() {
        // this.tabLoading = true;
        post(`/pms_api/role/assign/permission/list`, {roleId: this.roleId}).then(res => {
          this.permsList = res.data
          let routerList = res.data
          let routersTmp = []
          if (routerList != null && routerList !== undefined && routerList != '') { // 找出最顶层
            for (let index in routerList) {
              if (routerList[index].parentId == 0) {
                routersTmp.push(routerList[index])
              }
            }
            for (let index in routersTmp) {
              routersTmp[index].children = []
            }
            for (let index in routerList) { // 找出除了最顶层的所有层
              if (routerList[index].parentId != 0) {
                for (let idx in routersTmp) {
                  if (routersTmp[idx].permissionId == routerList[index].parentId) {
                    routersTmp[idx].children.push(routerList[index])
                    break;
                  }
                }
              }
            }
            // 排序
            routersTmp.sort((pre, back) => {
              if (parseInt(pre.orderNum) < parseInt(back.orderNum)) {
                return -1
              } else if (parseInt(pre.orderNum) > parseInt(back.orderNum)) {
                return 1
              } else {
                return pre.url.localeCompare(back.url);
              }
            })
            for (let index in routersTmp) {
              if (routersTmp[index].children) {
                routersTmp[index].children.sort((pre, back) => {
                  if (parseInt(pre.orderNum) < parseInt(back.orderNum)) {
                    return -1
                  } else if (parseInt(pre.orderNum) > parseInt(back.orderNum)) {
                    return 1
                  } else {
                    return pre.url.localeCompare(back.url);
                  }
                })
              }
            }
            this.dataList = routersTmp
          }
          post(`/pms_api/permission/list`).then(res => {
            this.permsListAll = res.data
            this.hasPerms = []
            for (let i in this.permsList) {
              for (let j in this.permsListAll) {
                if (this.permsList[i].permissionId === this.permsListAll[j].permissionId) {
                  this.permsListAll[j].select = true
                  this.hasPerms.push(this.permsListAll[j].permissionId)
                }
              }
            }
            // 将数据接口改为树形
            let permsListAllTmp = []
            let indexTmp = 0
            for (let i in this.permsListAll) {
              if (this.permsListAll[i].type === 0) {
                permsListAllTmp.push(this.permsListAll[i])
                indexTmp++
              }
            }
            for (let i in permsListAllTmp) {
              permsListAllTmp[i].children = []
            }
            for (let i in permsListAllTmp) {
              for (let j in this.permsListAll) {
                if (permsListAllTmp[i].permissionId === this.permsListAll[j].parentId && this.permsListAll[j].type === 1) {
                  permsListAllTmp[i].children.push(this.permsListAll[j])
                }
              }
            }
            for (let i in permsListAllTmp) {
              for (let j in permsListAllTmp[i].children) {
                permsListAllTmp[i].children[j].children = []
              }
            }
            for (let i in permsListAllTmp) {
              for (let j in permsListAllTmp[i].children) {
                for (let k in this.permsListAll) {
                  if (permsListAllTmp[i].permissionId === this.permsListAll[k].parentId && this.permsListAll[k].type === 2) {
                    permsListAllTmp[i].children[j].children.push(this.permsListAll[k])
                  }

                }
              }
            }
            this.permsListAll = permsListAllTmp
            console.log(permsListAllTmp)
            this.tabLoading = false;
          }).catch(err => {
            console.log(err)
            this.tabLoading = false
          })
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      //为角色分配权限
      addPerm() {
        let permTmp = this.hasPerms
        permTmp.push(this.permItem)
        let params = {roleId: this.roleItem.roleId, permissionIds: permTmp}
        post(`/pms_api/role/assign/permission`, params).then(res => {
          // this.$router.go(0);
          this.getPerms()
          // this.getPermsAll()
          this.addPermFlag = !this.addPermFlag
        }).catch(err => {
          console.log(err)
        })
        this.permItem = []
      },
      checkPerm(item) {
        this.$router.push({
          path: '/permissionsDetail',
          query: {
            id: item.permissionId,
            title: item.name
          }
        })
      },
      deletePerm(item) {
        console.log(item)
        this.$confirm('此操作将取消该角色与权限的绑定，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {roleId: this.roleItem.roleId, permissionId: item.permissionId}
          post(`/pms_api/role/assign/permission/delete`, params).then(res => {
            // this.$router.go(0);
            this.getPerms()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(err => {
            console.log(err)
          })
        }).catch(err => {
        })
      },
      getPermsAll() {

      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
